<template xmlns:el-col="http://www.w3.org/1999/html">
    <div>
        <el-container>
            <el-header style="text-align: right; font-size: 12px">
                <el-row>
                    <el-col :xs={span:2} :sm={span:1} :md={span:1} :lg={span:1}
                            :xl={span:1}>
                        <el-button round type="success" plain size="small" disabled>
                            {{currentLocation}}
                        </el-button>
                    </el-col>
                    <el-col :xs={span:3,offset:1} :sm={span:2} :md={span:1} :lg={span:1} :xl={span:1}>
                        <el-button icon="el-icon-s-home" @click="getAllMsg" type="text"/>
                    </el-col>
                    <el-col :xs={span:11} :sm={span:12} :md={span:12} :lg={span:12} :xl={span:12}>
                        <el-row :gutter="1" type="flex" justify="left">
                            <el-col :span="22">
                                <el-autocomplete
                                        v-model="searchText"
                                        :fetch-suggestions="querySearchAsync"
                                        size="medium"
                                        @select="search"
                                />

                            </el-col>
                            <el-col :xs={span:2} :sm={span:2} :md={span:1} :lg={span:1} :xl={span:1}>
                                <el-popover
                                        placement="bottom-end"
                                        trigger="click">
                                    <el-table
                                            :height="350"
                                            :data="searchUsers"
                                            style="width: 100%">
                                        <el-table-column
                                                prop="userName"
                                                label="名字"
                                                width="100%">
                                        </el-table-column>
                                        <el-table-column
                                                prop="msgCount"
                                                label="微博"
                                                width="50%">
                                        </el-table-column>
                                        <el-table-column
                                                prop="followCount"
                                                label="关注"
                                                width="50%">
                                        </el-table-column>
                                        <el-table-column
                                                prop="fansCount"
                                                label="粉丝"
                                                width="50%">
                                        </el-table-column>
                                        <el-table-column>
                                            <template slot-scope="scope">
                                                <el-button v-if="scope.row == null" type="text" size="small">
                                                    无
                                                </el-button>
                                                <el-button v-else-if="scope.row.userId === loginUser.userId" type="text"
                                                           size="small">
                                                    我
                                                </el-button>
                                                <el-button @click="unfollow(scope.row)"
                                                           v-else-if="scope.row.userRelation===2" type="text"
                                                           size="small">
                                                    互相关注
                                                </el-button>
                                                <el-button @click="unfollow(scope.row)"
                                                           v-else-if="scope.row.userRelation===1" type="text"
                                                           size="small">
                                                    已关注
                                                </el-button>
                                                <el-button @click="follow(scope.row)" v-else type="text" size="small">
                                                    关注
                                                </el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <el-button @click="search" slot="reference" icon="el-icon-search" circle/>
                                </el-popover>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :xs={span:4,offset:3} :sm={span:4,offset:5} :md={span:4,offset:6} :lg={span:4,offset:6}
                            :xl={span:4,offset:6}>
                        <el-tooltip content="WHO AM I" placement="bottom" effect="light">
                            <el-button @click="getMyMsg" type="text" size="small">{{loginUser.userName}}</el-button>
                        </el-tooltip>
                        <el-dropdown @command="userMove">
                            <i class="el-icon-sugar el-icon--right"/>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="mine">我的</el-dropdown-item>
                                <el-dropdown-item command="edit">修改</el-dropdown-item>
                                <el-dropdown-item command="collect">收藏</el-dropdown-item>
                                <el-dropdown-item command="quit">注销</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                </el-row>
            </el-header>

            <el-drawer
                    :visible.sync="showMy"
                    direction="rtl"
                    :size="dialogWidth">
                <el-collapse accordion style="margin:0 30px">
                    <el-collapse-item :title=mineShow.userName name="1" disabled/>
                    <el-collapse-item :title=mineShow.msgCount name="2" disabled/>
                    <el-collapse-item :title=mineShow.followCount name="3">
                        <el-table
                                :data="myFollow"
                                height="330"
                                style="width: 100%">
                            <el-table-column
                                    prop="userName"
                                    label="用户名">
                            </el-table-column>
                            <el-table-column
                                    sortable
                                    prop="msgCount"
                                    label="微博数">
                            </el-table-column>
                            <el-table-column
                                    sortable
                                    prop="followCount"
                                    label="关注数">
                            </el-table-column>
                            <el-table-column
                                    sortable
                                    prop="fansCount"
                                    label="粉丝数">
                            </el-table-column>
                        </el-table>
                    </el-collapse-item>
                    <el-collapse-item :title=mineShow.fansCount name="4">
                        <el-table
                                :data="myFans"
                                height="330"
                                style="width: 100%">
                            <el-table-column
                                    prop="userName"
                                    label="用户名">
                            </el-table-column>
                            <el-table-column
                                    sortable
                                    prop="msgCount"
                                    label="微博数">
                            </el-table-column>
                            <el-table-column
                                    sortable
                                    prop="followCount"
                                    label="关注数">
                            </el-table-column>
                            <el-table-column
                                    sortable
                                    prop="fansCount"
                                    label="粉丝数">
                            </el-table-column>
                        </el-table>
                    </el-collapse-item>
                </el-collapse>
            </el-drawer>

            <el-dialog title="Mine" :visible.sync="dialogFormVisible" :width="dialogWidth">
                <el-form :model="editMineForm" :rules="rules" ref="editMineForm">
                    <el-form-item label="OldName" prop="oldName" :label-width="formLabelWidth">
                        <el-input v-model.trim="editMineForm.oldName" :disabled="true"/>
                    </el-form-item>
                    <el-form-item label="Username" prop="userName" :label-width="formLabelWidth">
                        <el-input v-model.trim="editMineForm.userName" @blur="fetchData()" suffix-icon="el-icon-pear"/>
                    </el-form-item>
                    <el-form-item label="Password" prop="userPwd" :label-width="formLabelWidth">
                        <el-input show-password v-model.trim="editMineForm.userPwd"/>
                    </el-form-item>
                    <el-form-item label="Sex" prop="userSex" :label-width="formLabelWidth">
                        <el-select v-model="editMineForm.userSex" placeholder="请选择性别" clearable>
                            <el-option :key="item.id" :value="item.id" :label="item.name" v-for="item in sexList"/>
                        </el-select>
                    </el-form-item>
                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-row type="flex" justify="center">
                        <el-col :span="12" style="text-align: center">
                            <el-button @click="resetForm('editMineForm')">重 置</el-button>
                        </el-col>
                        <el-col :span="12" style="text-align: center">
                            <el-button type="primary" @click="mineEdit('editMineForm')">修 改</el-button>
                        </el-col>
                    </el-row>
                </div>
            </el-dialog>

            <el-dialog title="Collect" :visible.sync="collectVisible" :width="dialogWidth">
                <el-card>
                    <el-col v-for="item in myCollect" :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                        <el-card shadow="hover" class="box-card" :body-style="{ padding: '30px' }" style="margin: 5px">
                            <div slot="header" class="clearfix">
                                <span style="">{{item.user.userName}}</span>
                                <el-popconfirm confirmButtonText='是'
                                               @onConfirm="collect(item.msgId,true)"
                                               cancelButtonText='否'
                                               icon="el-icon-error"
                                               iconColor="red"
                                               title="是否取消收藏？">
                                    <el-button slot="reference" style="float: right; padding: 3px 0" type="text">取消收藏
                                    </el-button>
                                </el-popconfirm>
                            </div>
                            <span>{{item.msgContent}}</span>
                        </el-card>
                    </el-col>
                </el-card>
            </el-dialog>

            <el-main>
                <el-row type="flex" justify="center">
                    <el-col :span="23" style="">
                        <el-row type="flex" justify="center">
                            <el-col :offset="1" :span="21" style="padding: 10px">
                                <el-input
                                        type="textarea"
                                        resize="none"
                                        :autosize="{ minRows: 4, maxRows: 6}"
                                        placeholder="今天有没有努力开心呀 ：）"
                                        v-model="newMsg">
                                </el-input>
                            </el-col>
                            <el-col :span="2">
                                <div style="position:absolute; top:10px;">
                                    <el-row type="flex" justify="center">
                                        <el-col :span="15">
                                            <el-button @click="resetNewMsg" type="danger" icon="el-icon-delete" circle/>
                                        </el-col>
                                    </el-row>
                                </div>
                                <div style="position:absolute; bottom:10px;">
                                    <el-row type="flex" justify="center">
                                        <el-col :span="15">
                                            <el-button @click="sentNewMsg" type="primary" icon="el-icon-edit" circle/>
                                        </el-col>
                                    </el-row>
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <el-row v-for="item in allMsg" style="margin-top: 10px" type="flex" justify="center">

                    <el-col :span="20" v-if="item.user != null">
                        <el-card :body-style="{ padding: '20px' }" shadow="hover">
                            <div slot="header" class="clearfix">
                                <el-button @click="getOnesMsg(item.user.userId)" type="text">
                                    <span>{{item.user.userName}}</span>
                                </el-button>
                                <span style="float: right; padding-top: 12px;font-size: smaller">{{item.msgTimeStr}}</span>
                            </div>
                            <el-row>
                                <el-col :xs="6" :sm="4" :md="3" :lg="3" :xl="3">
                                    <el-row type="flex" justify="center">
                                        <el-button style="background-color: whitesmoke" icon="el-icon-moon-night"
                                                   circle/>
                                    </el-row>
                                </el-col>
                                <el-col :xs="18" :sm="20" :md="21" :lg="21" :xl="21">
                                    <el-row type="flex" justify="center">
                                        <el-col :span="24">
                                            <span>{{item.msgContent}}</span>
                                        </el-col>
                                    </el-row>
                                    <div style="padding-top: 25px;">
                                        <el-row type="flex" justify="center">
                                            <el-col :xs={span:9,offset:7} :sm={span:9,offset:7} :md={span:4,offset:17}
                                                    :lg={span:4,offset:17}
                                                    :xl={span:4,offset:17}>
                                                <el-button v-if="item.userRelation === 0 || item.userRelation === 2"
                                                           @click="collect(item.msgId,false)" type="text" class="button"
                                                           icon="el-icon-star-on">收藏{{item.msgCollect}}
                                                </el-button>
                                                <el-button v-else @click="collect(item.msgId,false)" type="text"
                                                           class="button" icon="el-icon-star-off">收藏{{item.msgCollect}}
                                                </el-button>
                                            </el-col>
                                            <el-col :xs={span:7,offset:1} :sm={span:2,offset:1} :md={span:2,offset:1}
                                                    :lg={span:2,offset:1}
                                                    :xl={span:2,offset:1}>
                                                <el-button v-if="item.userRelation === 1 || item.userRelation === 2"
                                                           @click="like(item.msgId)" type="text" class="button"
                                                           icon="el-icon-success">点赞{{item.msgLike}}
                                                </el-button>
                                                <el-button v-else @click="like(item.msgId)" type="text" class="button"
                                                           icon="el-icon-circle-check">点赞{{item.msgLike}}
                                                </el-button>
                                            </el-col>
                                        </el-row>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>
                    <el-col :span="20" v-else>
                        <el-card :body-style="{ padding: '20px' }" shadow="hover">
                            <div slot="header" class="clearfix">
                                <el-button type="text" disabled>
                                    <span style="color: green">{{loginUser.userName}}</span>
                                </el-button>
                                <el-button @click="confirmDelete(item.msgId)" style="float: right; padding-top: 13px"
                                           type="text"
                                           icon="el-icon-close"/>
                                <span style="float: right; padding: 12px 5px;font-size: smaller;color: gray">{{item.msgTimeStr}}</span>
                            </div>
                            <el-row>
                                <el-col :xs="6" :sm="4" :md="3" :lg="3" :xl="3">
                                    <el-row type="flex" justify="center">
                                        <el-button style="background-color: lightpink" icon="el-icon-milk-tea" circle/>
                                    </el-row>
                                </el-col>
                                <el-col :xs="18" :sm="20" :md="21" :lg="21" :xl="21">
                                    <el-row type="flex" justify="center">
                                        <el-col :span="24">
                                            <span>{{item.msgContent}}</span>
                                        </el-col>
                                    </el-row>
                                    <div style="padding-top: 25px;">
                                        <el-row type="flex" justify="center">
                                            <el-col :xs={span:9,offset:7} :sm={span:9,offset:7} :md={span:4,offset:17}
                                                    :lg={span:4,offset:17}
                                                    :xl={span:4,offset:17}>
                                                <el-button v-if="item.userRelation === 0 || item.userRelation === 2"
                                                           @click="collect(item.msgId,false)" type="text" class="button"
                                                           icon="el-icon-star-on">收藏{{item.msgCollect}}
                                                </el-button>
                                                <el-button v-else @click="collect(item.msgId,false)" type="text"
                                                           class="button" icon="el-icon-star-off">收藏{{item.msgCollect}}
                                                </el-button>
                                            </el-col>
                                            <el-col :xs={span:7,offset:1} :sm={span:2,offset:1} :md={span:2,offset:1}
                                                    :lg={span:2,offset:1}
                                                    :xl={span:2,offset:1}>
                                                <el-button v-if="item.userRelation === 1 || item.userRelation === 2"
                                                           @click="like(item.msgId)" type="text" class="button"
                                                           icon="el-icon-success">点赞{{item.msgLike}}
                                                </el-button>
                                                <el-button v-else @click="like(item.msgId)" type="text" class="button"
                                                           icon="el-icon-circle-check">点赞{{item.msgLike}}
                                                </el-button>
                                            </el-col>
                                        </el-row>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>
                </el-row>
            </el-main>
            <el-footer>
                <el-pagination
                        :pager-count="5"
                        :current-page="pageNum"
                        :page-sizes="[5, 10, 20]"
                        :page-size="pageSize"
                        layout="total, prev, pager, next, sizes"
                        :total="total"
                        @current-change="handleCurrentChange"
                        @size-change="handleSizeChange">
                </el-pagination>
            </el-footer>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: "Main",
        data() {
            return {
                select: '',
                dialogWidth: 0,
                currentLocation: '主页',
                loginUser: {
                    userName: "flag"
                },
                searchText: "",
                newMsg: "",
                sentMsg: {
                    userId: "",
                    msgContent: ""
                },
                searchUsers: [{}],
                showMine: false,
                allMsg: [
                    {
                        msgContent: '来都来了，讲两句讲两句。',
                        msgTime: '',
                        msgTimeStr: '2017/09/01',
                        user: {
                            userId: '',
                            userName: '遇见自己',
                            userAvatar: ''
                        }
                    }
                ],
                myCollect: [
                    {
                        msgId: '',
                        msgContent: '记忆碎片',
                        user: {
                            userId: '',
                            userName: '~',
                            userAvatar: ''
                        }
                    }
                ],
                collectVisible: false,
                pageNum: 0,
                pageSize: 10,
                total: 0,
                sexList: [
                    {
                        id: '0',
                        name: '女'
                    },
                    {
                        id: '1',
                        name: '男'
                    },
                    {
                        id: '2',
                        name: '其他'
                    }
                ],
                editMineForm: {
                    oldName: '',
                    userName: '',
                    userPwd: '',
                    userSex: '',
                    msgCount: '',
                    fansCount: '',
                    followCount: ''
                },
                mineShow: {
                    userName: '',
                    msgCount: '',
                    fansCount: '',
                    followCount: ''
                },
                myFollow: [{
                    userName: '',
                    msgCount: '',
                    fansCount: '',
                    followCount: ''
                }],
                myFans: [{
                    userName: '',
                    msgCount: '',
                    fansCount: '',
                    followCount: ''
                }],
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur'}
                    ],
                    password:
                        [
                            {required: true, message: '请输入密码', trigger: 'change'},
                            {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
                        ],
                    userName:
                        [
                            {required: true, message: '请输入用户名', trigger: 'blur'},
                            {min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur'}
                        ],
                    userPwd:
                        [
                            {required: true, message: '请输入密码', trigger: 'change'},
                            {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
                        ],
                    userSex:
                        [
                            {required: true, message: '请选择性别', trigger: 'change'}
                        ]
                },
                formLabelWidth: '90px',
                dialogFormVisible: false,
                ableEditMine: false,
                showMy: false,
                showOther: false,
                otherId: '',
                names: [],
                timeout: null
            }
        },
        methods: {
            getAllMsg() {
                this.showOther = false;
                this.showMine = false;
                const _this = this;
                axios.get('http://localhost:10010/api/item/wb/' + _this.loginUser.userId + '/' + _this.pageNum + '/' + _this.pageSize).then(function (resp) {
                    if (resp.data.list.length > 0) {
                        _this.allMsg = resp.data.list;
                        _this.pageSize = resp.data.pageSize;
                        _this.pageNum = resp.data.pageNum;
                        _this.total = resp.data.total;
                        _this.currentLocation = '主页';
                    }
                })
            },
            getMyMsg() {
                this.showOther = false;
                this.showMine = true;
                const _this = this;
                axios.get('http://localhost:10010/api/item/wb/one/' + _this.loginUser.userId + '/' + _this.pageNum + '/' + _this.pageSize).then(function (resp) {
                    if (resp.data.list.length > 0) {
                        _this.allMsg = resp.data.list;
                        _this.pageSize = resp.data.pageSize;
                        _this.pageNum = resp.data.pageNum;
                        _this.total = resp.data.total;
                        _this.currentLocation = '我的';
                    } else {
                        _this.getAllMsg();
                        _this.$message({
                            center: true,
                            type: 'warning',
                            message: '你的世界一片空白'
                        });
                    }
                })
            },
            getOnesMsg(userId) {
                this.showMine = false;
                this.showOther = true;
                const _this = this;
                axios.get('http://localhost:10010/api/item/wb/other/' + userId + '/' + _this.loginUser.userId + '/' + 1 + '/' + _this.pageSize).then(function (resp) {
                    if (resp.data.list.length > 0) {
                        _this.allMsg = resp.data.list;
                        _this.pageSize = resp.data.pageSize;
                        _this.pageNum = resp.data.pageNum;
                        _this.total = resp.data.total;
                        _this.currentLocation = resp.data.list[0].user.userName;
                        _this.otherId = userId;
                    }
                })
            },
            sentNewMsg() {
                if (this.newMsg.trim() !== "") {
                    this.sentMsg.userId = this.loginUser.userId;
                    this.sentMsg.msgContent = this.newMsg;
                    const _this = this;
                    axios.post('http://localhost:10010/api/item/wb/sent', _this.sentMsg).then(function (resp) {
                        if (resp.data) {
                            _this.successMessage("发送成功");
                            _this.resetNewMsg();
                            _this.getAllMsg();
                        }
                    })
                } else {
                    this.errorMessage("请输入微博内容");
                }
            },
            search() {
                if (this.searchText.trim() !== "") {
                    const _this = this;
                    axios.get('http://localhost:10010/api/item/user/search/' + _this.loginUser.userId + '/' + _this.searchText).then(function (resp) {
                        if (resp.data.length > 0) {
                            _this.searchUsers = resp.data;
                        } else {
                            _this.searchUsers = null;
                        }
                    })
                } else {
                    this.searchUsers = null;
                }
            },
            follow(row) {
                const _this = this;
                axios.get('http://localhost:10010/api/item/user/follow/' + _this.loginUser.userId + '/' + row.userId).then(function (resp) {
                    if (resp.data) {
                        _this.search();
                        _this.editMine();
                        _this.dialogFormVisible = false;
                        _this.successMessageAside("关注成功");
                    } else {
                        _this.errorMessageAside("关注失败");
                    }
                })
            },
            unfollow(row) {
                const _this = this;
                axios.get('http://localhost:10010/api/item/user/unfollow/' + _this.loginUser.userId + '/' + row.userId).then(function (resp) {
                    if (resp.data) {
                        _this.search();
                        _this.editMine();
                        _this.dialogFormVisible = false;
                        _this.successMessageAside("取关成功");
                    } else {
                        _this.errorMessageAside("取关失败");
                    }
                })
            },
            like(msgId) {
                const _this = this;
                axios.get('http://localhost:10010/api/item/wb/like/' + _this.loginUser.userId + '/' + msgId).then(function (resp) {
                    if (resp.data) {
                        if (_this.showMine) {
                            _this.getMyMsg();
                        } else {
                            _this.getAllMsg();
                        }
                    } else {
                        _this.errorMessageAside("失败");
                    }
                })
            },
            collect(msgId, flag) {
                const _this = this;
                axios.get('http://localhost:10010/api/item/wb/collect/' + _this.loginUser.userId + '/' + msgId).then(function (resp) {
                    if (resp.data) {
                        if (_this.showMine) {
                            _this.getMyMsg();
                        } else {
                            _this.getAllMsg();
                        }
                        if (flag) {
                            _this.showCollect();
                        }
                    } else {
                        _this.errorMessageAside("失败");
                    }
                })
            },
            delMsg(msgId) {
                const _this = this;
                axios.delete('http://localhost:10010/api/item/wb/delete/' + _this.loginUser.userId + '/' + msgId).then(function (resp) {
                    if (resp.data) {
                        _this.getMyMsg();
                        _this.$message({
                            center: true,
                            type: 'success',
                            message: '一切过往皆为序章'
                        });
                    } else {
                        _this.errorMessageAside("删除失败");
                    }
                })
            },
            userMove(command) {
                if (command === "quit") {
                    this.logout();
                }
                if (command === "collect") {
                    this.showCollect();
                }
                if (command === "edit") {
                    this.editMine();
                }
                if (command === "mine") {
                    this.showMyMove();
                }
            },
            showMyMove() {
                this.getMyRelaDetails();
                this.showMy = true;
            },
            showCollect() {
                const _this = this;
                axios.get('http://localhost:10010/api/item/wb/myCollect/' + _this.loginUser.userId).then(function (resp) {
                    if (resp.data.length > 0) {
                        _this.collectVisible = true;
                        _this.myCollect = resp.data;
                    } else {
                        _this.$message({
                            center: true,
                            type: 'warning',
                            message: '收藏为空'
                        });
                    }
                })
            },
            logout() {
                localStorage.setItem("loginUser", "null");
                this.$router.push("/");
            },
            handleCurrentChange(newPage) {
                this.pageNum = newPage;
                if (this.showMine) {
                    this.getMyMsg();
                } else if (this.showOther) {
                    this.getOnesMsg(this.otherId);
                } else {
                    this.getAllMsg();
                }

            },
            handleSizeChange(newSize) {
                this.pageSize = newSize;
                if (this.showMine) {
                    this.getMyMsg();
                } else if (this.showOther) {
                    this.getOnesMsg(this.otherId);
                } else {
                    this.getAllMsg();
                }
            },
            resetNewMsg() {
                this.newMsg = "";
            },
            successMessageAside(msg) {
                this.$notify({
                    title: msg,
                    showClose: false,
                    type: 'success',
                    duration: 1000
                });
            },
            errorMessageAside(msg) {
                this.$notify({
                    title: msg,
                    showClose: false,
                    type: 'warning',
                    duration: 1000
                });
            },
            successMessage(msg) {
                this.$message({
                    showClose: true,
                    message: 'success:' + msg,
                    type: 'success'
                });
            },
            errorMessage(msg) {
                this.$message({
                    showClose: true,
                    message: 'error:' + msg,
                    type: 'error'
                });
            },
            fetchData() {
                const _this = this;
                axios.get("http://localhost:10010/api/item/user/check/" + _this.editMineForm.userName).then(function (resp) {
                    if (_this.editMineForm.userName === _this.loginUser.userName) {
                        _this.ableEditMine = true;
                    } else if (resp.data) {
                        _this.ableEditMine = true;
                        _this.successMessage("用户名可用");
                    } else {
                        _this.ableEditMine = false;
                        _this.errorMessage("用户名不可用");
                    }
                })
            },
            editMine() {
                this.dialogFormVisible = true;
                const _this = this;
                axios.get('http://localhost:10010/api/item/user/getMine/' + _this.loginUser.userId).then(function (resp) {
                    if (resp.data !== "") {
                        _this.editMineForm = resp.data;
                        _this.editMineForm.userSex = _this.sexList[_this.editMineForm.userSex].name;
                        _this.editMineForm.oldName = _this.loginUser.userName;
                    } else {
                        _this.errorMessage("服务器:在忙。");
                    }
                })
            },
            mineEdit(formName) {
                if (this.ableEditMine) {
                    const _this = this;
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            if (_this.editMineForm.userSex === '男') {
                                _this.editMineForm.userSex = 1;
                            } else if (_this.editMineForm.userSex === '女') {
                                _this.editMineForm.userSex = 0;
                            } else if (_this.editMineForm.userSex === '其他') {
                                _this.editMineForm.userSex = 2;
                            }
                            axios.get('http://localhost:10010/api/item/user/edit/' + _this.editMineForm.oldName + '/' + _this.editMineForm.userName + '/' + _this.editMineForm.userPwd + '/' + _this.editMineForm.userSex).then(function (resp) {
                                if (resp.data != null) {
                                    _this.successMessage("修改成功");
                                    localStorage.setItem('loginUser', JSON.stringify(resp.data));
                                    _this.loginUser = JSON.parse(localStorage.getItem("loginUser"));
                                    _this.dialogFormVisible = false;
                                } else {
                                    _this.errorMessage("修改失败");
                                }
                            })
                        } else {
                            return false;
                        }
                    });
                } else {
                    this.errorMessage("用户名不可用")
                }

            },
            getMyRelaDetails() {
                this.mineShow.userName = "用户名:" + this.editMineForm.userName;
                this.mineShow.msgCount = "微博:" + this.editMineForm.msgCount;
                this.mineShow.fansCount = '粉丝数:' + this.editMineForm.fansCount;
                this.mineShow.followCount = '关注数:' + this.editMineForm.followCount;

                const _this = this;
                axios.get('http://localhost:10010/api/item/user/getFollow/' + _this.loginUser.userId).then(function (resp) {
                    if (resp.data !== "") {
                        _this.myFollow = resp.data;
                    }
                });
                axios.get('http://localhost:10010/api/item/user/getFans/' + _this.loginUser.userId).then(function (resp) {
                    if (resp.data !== "") {
                        _this.myFans = resp.data;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            confirmDelete(msgId) {
                this.$confirm('此操作将永久删除该微博, 是否继续？', '提示', {
                    confirmButtonText: '确定删除',
                    cancelButtonText: '取消',
                    type: 'error'
                }).then(() => {
                    this.delMsg(msgId);
                }).catch(() => {
                    this.$message({
                        center: true,
                        type: 'info',
                        message: '珍视每个人生片段'
                    });
                });
            },
            setDialogWidth() {
                const val = document.body.clientWidth;
                const def = 600;
                if (val < def) {
                    this.dialogWidth = '100%'
                } else {
                    this.dialogWidth = def + 'px'
                }
            },
            querySearchAsync(queryString, cb) {
                const _this = this;
                if (queryString.trim() !== "") {
                    axios.get('http://localhost:10010/api/search/' + queryString).then(function (resp) {
                        if (resp.data !== null) {
                            let results = resp.data.map(item => {
                                return {
                                    id: item.split(":")[0],
                                    value: item.split(":")[1]
                                };
                            });
                            cb(results);
                        }else {
                            _this.errorMessage("无相关用户");
                        }
                    });
                }else {
                    let results = this.names;
                    cb(results);
                }
            },
            /*createStateFilter(queryString) {
                return (state) => {
                    return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },*/
            allNamesInit() {
                const _this = this;
                axios.get('http://localhost:10010/api/search').then(function (resp) {
                    if (resp.data !== null) {
                        _this.names = resp.data.map(item => {
                            return {
                                id: item.split(":")[0],
                                value: item.split(":")[1]
                            };
                        });
                    }
                });
            }
        },
        created() {
            if (localStorage.getItem("loginUser") === "null") {
                this.$router.push("/");
            } else {
                this.loginUser = JSON.parse(localStorage.getItem("loginUser"));
                this.searchUsers = null;
                this.getAllMsg();
                this.editMine();
                this.dialogFormVisible = false;
                this.editMineForm.oldName = this.loginUser.userName;
                this.setDialogWidth();
                this.allNamesInit();
            }
        },
        mounted() {
            window.onresize = () => {
                return (() => {
                    this.setDialogWidth()
                })()
            }
        }
    }
</script>

<style scoped>
    .el-header {
        background-color: white;
        border: black solid 1px;
        color: black;
        line-height: 60px;
        position: fixed;
        width: 100%;
        left: 0;
        top: 0;
        z-index: 1000;
    }

    .el-main {
        background-color: whitesmoke;
        min-height: 650px;
        margin-top: 60px;
        margin-bottom: 60px;
        border: black solid 1px;
    }

    .el-footer {
        background-color: white;
        margin-top: 5px;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        z-index: 1000;
    }

    .el-pagination {
        margin-top: 13px;
        text-align: center;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 70px;
        height: 70px;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .el-select .el-input {
        width: 130px;
    }

    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }
</style>